<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0px;padding: 0px;
        }
        #box{
            height: 420px;
            width: 350px;
            border:1px solid #ccc;
            margin:100px auto;position: relative;
        }
        #big-box{
            height: 350px;
            background: url("img/鼠标展示/01big.jpg") no-repeat center;
        }
        #small-box{
            height: 70px;position: absolute;bottom: 0px; border-top:1px solid #ccc;
        }
        #small-box li{
            float: left;list-style: none;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="big-box"></div>
        <div id="small-box">
            <ul>
                <li id="li01"><img src="img/鼠标展示/01.jpg"></li>
                <li id="li02"><img src="img/鼠标展示/02.jpg"></li>
                <li id="li03"><img src="img/鼠标展示/03.jpg"></li>
                <li id="li04"><img src="img/鼠标展示/04.jpg"></li>
                <li id="li05"><img src="img/鼠标展示/05.jpg"></li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        var bigbox = document.getElementById("big-box");

        function move(id,img) {
            var id = document.getElementById(id);
            id.onmouseover = function () {
                bigbox.style.backgroundImage = img;
            }
        }
        move("li01","url(img/鼠标展示/01big.jpg)")
        move("li02","url(img/鼠标展示/02big.jpg)")
        move("li03","url(img/鼠标展示/03big.jpg)")
        move("li04","url(img/鼠标展示/04big.jpg)")
        move("li05","url(img/鼠标展示/05big.jpg)")


        // var li01 = document.getElementById("li01");
        // li01.onmouseover = function () {
        //     bigbox.style.backgroundImage = "url(img/鼠标展示/01big.jpg)";
        // }
        // var li02 = document.getElementById("li02");
        // li02.onmouseover = function () {
        //     bigbox.style.backgroundImage = "url(img/鼠标展示/02big.jpg)";
        // }


    </script>

</body>
</html>